<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>标题</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">

		<link rel="stylesheet" href="mystyle.css">

		<!-- in a production environment, you can include the minified css. It contains the css of the board and the default controls (size, nav, colors):
		<link rel="stylesheet" href="../dist/drawingboard.min.css"> -->
		<link rel="stylesheet" href="../css/drawingboard.css">

	</head>
	<body>
		<noscript>JavaScript is required :(</noscript>

		<div id="container">
			<div class="example">
				<div id="default-board"></div>
			</div>
            <a href="#" download="picture.jpg"  id="downloadImage_a"></a>
        </div>

		<!-- jquery is required - zepto might do the trick too -->
		<script src="../components/jquery/jquery.min.js"></script>

		<!-- in a production environment, just include the minified script. It contains the board and the default controls (size, nav, colors, download): -->
		<!--<script src="../dist/drawingboard.min.js"></script>-->

		<script src="../js/utils.js"></script>
		<script src="../js/board.js"></script>
		<script src="../js/controls/control.js"></script>
		<script src="../js/controls/color.js"></script>
		<script src="../js/controls/drawingmode.js"></script>
		<script src="../js/controls/navigation.js"></script>
		<script src="../js/controls/size.js"></script>
		<script src="../js/controls/download.js"></script>

		<script data-example="1">
			//create the drawingboard by passing it the #id of the wanted container
			var defaultBoard = new DrawingBoard.Board('default-board', {
                size: 20,
                fillTolerance: 150,     ///???
                controls: [
                    'Color',
                    'DrawingMode',
                    { Size: { type: "range", min: 5, max: 50 } },
                    'Navigation',
                    'Download'

                ],
                webStorage: false,
                droppable: true, //try dropping an image on the canvas!
                errorMessage:true,
                stretchImg:false
            });

		</script>


		<!-- an input[type=range] poyfill is more than recommanded if you want to use the default "size" control with the "range" type *on every browser*
			the polyfill is loaded only if necessary via yepnope http://yepnopejs.com/

			note this is totally not required if the size control is set to "auto" or "dropdown" - the control will work with every browser with an alternate view -->
		<script src="./yepnope.js"></script>
		<script>
			var iHasRangeInput = function() {
				var inputElem  = document.createElement('input'),
					smile = ':)',
					docElement = document.documentElement,
					inputElemType = 'range',
					available;
				inputElem.setAttribute('type', inputElemType);
				available = inputElem.type !== 'text';
				inputElem.value         = smile;
				inputElem.style.cssText = 'position:absolute;visibility:hidden;';
				if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) {
					docElement.appendChild(inputElem);
					defaultView = document.defaultView;
					available = defaultView.getComputedStyle &&
						defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' &&
						(inputElem.offsetHeight !== 0);
					docElement.removeChild(inputElem);
				}
				return !!available;
			};

			yepnope({
				test : iHasRangeInput(),
				nope : ['./fd-slider.min.css', './fd-slider.min.js'],
				callback: function(id, testResult) {
					if("fdSlider" in window && typeof (fdSlider.onDomReady) != "undefined") {
						try { fdSlider.onDomReady(); } catch(err) {}
					}
				}
			});
		</script>
	</body>
</html>
